// import React from 'react';
import { BlockMath } from 'react-katex';
import 'katex/dist/katex.min.css';

// 带错误处理的公式渲染组件
const SafeBlockMath = ({ math }) => {
  try {
    return <BlockMath math={math} />;
  } catch (error) {
    console.warn('公式渲染错误:', error);
    return <div className="text-red-500">公式渲染失败</div>;
  }
};

const KeyMathematicalFormulas = () => {
  // 公式定义
  const formulas = {
    ramanujan: "\\frac{1}{\\left( \\sqrt{\\phi \\sqrt{5}} - \\phi \\right) e^{\\frac{2}{5}\\pi}} = 1 + \\frac{e^{-2\\pi}}{1 + \\frac{e^{-4\\pi}}{1 + \\frac{e^{-6\\pi}}{1 + \\frac{e^{-8\\pi}}{1 + \\cdots}}}}",
    cauchySchwarz: "\\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)",
    pentagonalNumber: "\\prod_{n=1}^\\infty (1 - q^n) = \\sum_{k=-\\infty}^\\infty (-1)^k q^{k(3k-1)/2}",
    fourierInverse: "f(x) = \\int_{-\\infty}^\\infty \\hat{f}(\\xi) e^{2\\pi i \\xi x} \\, d\\xi"
  };

  return (
    <div style={{
      maxWidth: '900px',
      margin: '2rem auto',
      padding: '0 1rem',
      fontFamily: 'system-ui, -apple-system, sans-serif'
    }}>
      <h2 style={{
        color: '#2d3748',
        borderBottom: '3px solid #4a5568',
        paddingBottom: '0.5rem',
        marginBottom: '2rem'
      }}>
        重要数学公式
      </h2>

      {/* 拉马努金公式 */}
      <div style={{ marginBottom: '2.5rem', padding: '1rem', backgroundColor: '#f7fafc', borderRadius: '8px' }}>
        <h3 style={{ color: '#2c5282', marginTop: 0 }}>拉马努金公式</h3>
        <p style={{ lineHeight: 1.6 }}>
          这是印度数学家斯里尼瓦瑟・拉马努金发现的一个优美的连分数公式，
          它展示了 e 和 π 之间的深刻联系，是数学中最令人惊叹的公式之一。
        </p>
        <div style={{ marginTop: '1rem', padding: '1rem', backgroundColor: 'white', borderRadius: '4px' }}>
          <SafeBlockMath math={formulas.ramanujan} />
        </div>
      </div>

      {/* 柯西-施瓦茨不等式 */}
      <div style={{ marginBottom: '2.5rem', padding: '1rem', backgroundColor: '#f7fafc', borderRadius: '8px' }}>
        <h3 style={{ color: '#2c5282', marginTop: 0 }}>柯西-施瓦茨不等式</h3>
        <p style={{ lineHeight: 1.6 }}>
          这是数学中最基本且应用最广泛的不等式之一，在内积空间、概率论和数学分析中都有重要应用，
          它表明两个向量的点积不超过它们模长的乘积。
        </p>
        <div style={{ marginTop: '1rem', padding: '1rem', backgroundColor: 'white', borderRadius: '4px' }}>
          <SafeBlockMath math={formulas.cauchySchwarz} />
        </div>
      </div>

      {/* 五边形数定理 */}
      <div style={{ marginBottom: '2.5rem', padding: '1rem', backgroundColor: '#f7fafc', borderRadius: '8px' }}>
        <h3 style={{ color: '#2c5282', marginTop: 0 }}>五边形数定理</h3>
        <p style={{ lineHeight: 1.6 }}>
          这是组合数学中的一个重要定理，它将分拆函数与五边形数联系起来，
          在数论和组合数学中有广泛应用。
        </p>
        <div style={{ marginTop: '1rem', padding: '1rem', backgroundColor: 'white', borderRadius: '4px' }}>
          <SafeBlockMath math={formulas.pentagonalNumber} />
        </div>
      </div>

      {/* 傅里叶逆变换公式 */}
      <div style={{ marginBottom: '2.5rem', padding: '1rem', backgroundColor: '#f7fafc', borderRadius: '8px' }}>
        <h3 style={{ color: '#2c5282', marginTop: 0 }}>傅里叶逆变换公式</h3>
        <p style={{ lineHeight: 1.6 }}>
          这是傅里叶分析中的基本公式，它表明任何函数都可以表示为不同频率的正弦和余弦函数的积分，
          在信号处理、量子力学和偏微分方程中都有重要应用。
        </p>
        <div style={{ marginTop: '1rem', padding: '1rem', backgroundColor: 'white', borderRadius: '4px' }}>
          <SafeBlockMath math={formulas.fourierInverse} />
        </div>
      </div>
    </div>
  );
};

export default KeyMathematicalFormulas;
    